<template>
  <div class="warpper">
    <div class="logo_bar">
      <img src="../../assets/logo.png" alt="" />
      <!-- <span>后台系统</span> -->
    </div>
    <!-- 导航列表 -->
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      background-color="#1d2d36"
      :collapse-transition="false"
      :unique-opened="true"
      text-color="#fff"
      active-text-color="#409eff"
      router
      :collapse="isCollapse"
    >
      <template v-for="(item, index) in routes">
        <el-menu-item v-if="!item.children" :index="item.path" :key="index">
          <i :class="`iconfont ${item.meta.icon}`"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
        <el-submenu :index="item.path" :key="item.path" v-if="item.children">
          <template slot="title">
            <i :class="`iconfont ${item.meta.icon}`"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item
            :index="v.path"
            v-for="(v, i) in item.children"
            :key="i"
          >
            <i :class="`iconfont ${v.meta.icon}`"></i>
            <span slot="title">{{ v.meta.title }}</span>
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {},
  components: {},
  data() {
    return {
      defaultActive: "/", // 默认打开
    };
  },
  methods: {},
  mounted() {},
  watch: {},
  computed: {
    routes() {
      const routes = this.$router.options.routes[1].children;
      return routes;
    },
    ...mapState(["isCollapse"]),
  },
  filters: {},
};
</script>
<style lang="scss" scoped>
.el-menu {
  border: none;
}
.warpper {
  .logo_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #fff;
    // text-align: center;
    img {
      height: 100%;
    }
    span {
      width: 80px;
      font-size: 20px;
    }
  }
}
</style>
